<template>
  <div>
    <div class="carousel">
      <!-- 轮播图开始 -->
      <div class="block" >
        <el-carousel height="400px" >
          <el-carousel-item  v-for="item in slideList" :key="item.id">
            <img :src =item.pic />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 轮播图结束 -->
    </div>
    <!-- 热门房源开始 -->
    <div class="projects">
      <div class="wrapper">
        <div class="title" >热门房源</div>
        <!--<div class="project" v-for="item in houseList" :key="item.id" @click="goDetail(item.id)">-->
          <!--<div class="left">-->
            <!--<img-->
                    <!--width="100%"-->
                    <!--:src="item.pic"-->
                    <!--alt=""-->
            <!--/>-->
          <!--</div>-->
          <!--<div class="right">-->
            <!--<div class="intro" style="font-weight: bold">房源名：{{item.name}}</div>-->
            <!--<div class="intro">地址：{{item.address}}</div>-->
            <!--<div class="intro">房源简介：{{item.instruction}}</div>-->
          <!--</div>-->
        <!--</div>-->
        <el-row :gutter="20">
          <div
                  class="left"
                  v-for="item in houseList"
                  :key="item.id"
                  @click="goDetail(item.id)"
          >
            <el-col :span="6"
            ><div class="grid-content bg-purple">
              <div class="pic"><img width="100%" height="200px" :src="item.pic" /></div>
              <div class="text">
                <div class="name" style="text-align: center"> 房源名：{{ item.name }}</div>
                <div class="name" style="text-align: center">地址：{{ item.address }}</div>
              </div>
              <div class="top"></div></div
            ></el-col>
          </div>
        </el-row>
        </div>
      </div>
    <!-- 热门房源结束 -->
  </div>
</template>


<script>
import { getHouse,listSlideshow } from "@/utils/request";
export default {
    name: "Home",
  data() {
    return {
        houseList:[],
        slideList:[],
        queryParams: {
            pageNum: 1,
            pageSize: 8,
            hot:"是"
        },
        queryParams2: {
            pageNum: 1,
            pageSize: 4
        }
    }
  },
  methods: {
      listDataApi(){
          getHouse(this.queryParams).then(res => {
              if(res.code == 200){
                  this.houseList = res.rows;
                  this.queryParams.total=res.total;
              }else{
                  this.$message({
                      type:'error',
                      message:res.msg
                  })
              }
          })
      },findPage(){
          listSlideshow(this.queryParams2).then((res) => {
              if (res.code == 200) {
                  this.slideList = res.rows;
              } else {
                  this.$message({
                      type: "error",
                      message: this.message,
                  });
              }
          });
      },
      goDetail(id){
          // 跳转到详情页面，并且传递id
          this.$router.push({path:'/houseDetail',query:{id:id}})
      }
  },
  created() {
      this.listDataApi();
      this.findPage();
  },
}
</script>

<style scoped lang='scss'>
.projects {
  .wrapper {
    width: 1240px;
    .title {
      font-size: 20px;
      line-height: 80px;
      border-bottom: 1px solid #f4f4f4;
    }
    .project {
      display: flex;
      padding: 1em 0;
      border-bottom: 1px solid #f4f4f4;
      .left {
        width: 300px;
        height: 200px;
        background-color: #f4f4f4;
        border-radius: 5px;
        overflow: hidden;
      }
      .right {
        flex: 1;
        padding: 0 2em;
        .name {
          font-weight: bolder;
          font-size: 1em;
        }
        .date {
          margin: 1em 0;
        }
      }
    }
  }
}
</style>
